import { HttpClient } from '@angular/common/http';
import { Component, HostBinding, HostListener, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BottomContainerComponent } from '@shared/components/bottom-container/bottom-container.component';
import { MessageService } from '@shared/services/message.service';
import { SocketService } from '@shared/services/scoket.service';

@Component({
  selector: 'app-screen',
  templateUrl: './screen.component.html',
  styleUrl: './screen.component.css'
})
export class ScreenComponent implements OnInit {
  @ViewChild('bottomContainer') bottomContainer!: BottomContainerComponent;

  @HostBinding('style.height.px') height = 1080;
  @HostBinding('style.width.px') width = 1920;
  @HostBinding('style.--scale') scale = 1;

  @HostListener('window:resize', ['$event'])
  onWindowResize() {
    this.onResize();
  }

  @HostListener('window:fullscreenchange', ['$event'])
  onFullscreenchange() {
    if (this.bottomContainer) {
      this.bottomContainer.onFullscreenchange()
    }
  }

  private bools = {
    hasSphere: false,
    hasSignThree: false,
    hasSignBooks: false,
    hasQrode: true,
    hasAudio: true,
  }

  private currentSelect = '';
  private currentCode = 0;
  httpData: any = {};

  state = { ...this.bools }



  constructor(
    private route: ActivatedRoute,
    private socketService: SocketService,
    private messageService: MessageService,
    private http: HttpClient,
  ) {
    const queryParams = this.route.queryParams
    queryParams.subscribe(v => {
      if (v['aid']) {
        this.http.get(`/api/v1/pc/activities/${v['aid']}`).subscribe((res: any) => {
          if (res.code === 0) {
            this.httpData = res.data;
          }
        })

        this.socketService.init(v['aid']);
      }
    })

    this.messageService.On('bottom-container', (data: { type: string, isClose: boolean }) => {
      switch(data.type) {
        case 'home': this.clear(); break;
        case 'qrcode': this.state.hasQrode = !data.isClose; break;
        case 'sign_3d': this.state.hasSignThree = data.isClose; break;
        case 'sign_book': this.state.hasSignBooks = data.isClose; break;
      }
    })
  }

  ngOnInit(): void {
    this.onResize();
  }

  ngAfterViewInit() {

  }

  onResize() {
    const h = window.innerHeight / this.height;
    const w = window.innerWidth / this.width;
    this.scale = h < w ? h : w;
    this.messageService.Send('windowResize');
  }

  qrcodeClick() {
    this.state.hasQrode = false;
    this.bottomContainer.closeQrcode();
  }

  clear() {
    this.state = { ...this.bools }
  }

}
